import { PackageManagerTabs } from '@theme';

# NativeWind

[NativeWind](https://www.nativewind.dev/) brings Tailwind CSS utility classes to React Native, enabling rapid, consistent styling. With Re.Pack, you can seamlessly integrate NativeWind through a dedicated plugin.

[@callstack/repack-plugin-nativewind](https://github.com/callstack/repack/tree/main/packages/plugin-nativewind) is a plugin for Re.Pack that enables integrating NativeWind into your React Native projects.

## About

This plugin seamlessly integrates NativeWind with Re.Pack's build process by:

- Configuring PostCSS and Tailwind CSS processing for your stylesheets
- Handling conversion of CSS to React Native-compatible styles
- Setting up proper SWC transformations for NativeWind's JSX runtime

## Installation

First, follow these steps from the official [NativeWind installation guide](https://www.nativewind.dev/docs/getting-started/installation):

1. [Install NativeWind](https://www.nativewind.dev/docs/getting-started/installation#1-install-nativewind)
2. [Setup Tailwind CSS](https://www.nativewind.dev/docs/getting-started/installation#2-setup-tailwind-css)
3. [Import your CSS file](https://www.nativewind.dev/docs/getting-started/installation#5-import-your-css-file)
4. (Optional) [Setup TypeScript support](https://www.nativewind.dev/docs/getting-started/installation#7-typescript-setup-optional)

Then install the Re.Pack NativeWind plugin and its dependencies:

<PackageManagerTabs command="install -D @callstack/repack-plugin-nativewind postcss postcss-loader autoprefixer" />

:::tip Version Alignment
The NativeWind plugin is versioned together with Re.Pack. For best compatibility, align the version of `@callstack/repack-plugin-nativewind` with your `@callstack/repack` version in the project.
:::

:::info{title="A note on dependencies:"}
These additional dependencies (`postcss`, `postcss-loader`, and `autoprefixer`) are required for processing Tailwind CSS with Webpack/Rspack, as specified in the [official Tailwind CSS Rspack guide](https://tailwindcss.com/docs/guides/rspack). They enable PostCSS processing and autoprefixing of CSS styles in your build pipeline.
:::

## Usage

:::info{title="Webpack specific configuration"}
If you are using Webpack (not Rspack), you need to add the following configuration to your `babel.config.js`:

```js title="babel.config.js"
plugins: [
  [
    '@babel/plugin-transform-react-jsx',
    {
      runtime: 'automatic',
      importSource: 'nativewind',
    },
  ],
],
```
:::

### Plugin

To add the plugin to your Re.Pack configuration, update your `rspack.config.js` or `webpack.config.js` as follows:

```js title="rspack.config.js"
import { NativeWindPlugin } from "@callstack/repack-plugin-nativewind";

export default (env) => {
  // ...
  return {
    // ...
    plugins: [
      // ...
      new NativeWindPlugin(),
    ],
  };
};
```

## Troubleshooting

- **Styles not applying?**

  Ensure your CSS import is present and the plugin is added to your config.

- **PostCSS errors?**

  Double-check that all required dependencies are installed and your `postcss.config.js` is set up.

- **TypeScript issues?**

  Follow the [NativeWind TypeScript setup guide](https://www.nativewind.dev/getting-started/typescript).

## Further Resources

- [NativeWind Documentation](https://www.nativewind.dev/docs)
- [Tailwind CSS Documentation](https://tailwindcss.com/)
- [Re.Pack NativeWind Plugin Repo](https://github.com/callstack/repack/tree/main/packages/plugin-nativewind)

